<template>
	<view class="shopcart">
		<!-- 适配状态栏 -->
		<view class="head flex-btw">
			<!-- #ifdef APP-PLUS -->
			<view class="status_bar"></view>
			<!-- #endif -->
			<view class="top">
				<text class="tit">购物车</text>
				<!-- <view class="all">
					<u-checkbox class="checkbox" v-model="isSelectAll" @change="selectAll" size="24" shape="circle" active-color="#40AE36"> 全选</u-checkbox>
				</view> -->
			</view>
			<text class="del" @click="clearCart">清空</text>
		</view>
		<view class="content">
			<view class="have">
				<scroll-view class="scroll_height" scroll-y="true">
					<view class="all_good">
						<template v-for="(item,index) in dataList">
							<view v-if="item.datum_activity !=='积分'"
							:key="item.id"
								:class="item.is_enough==0||item.status==0||item.is_del==1? 'flex sign_good disable' : 'flex sign_good'">

								<!-- #ifdef MP-WEIXIN-->
								<!-- 微信小程序不认v-model !只可作用value!!!!! -->
								<u-checkbox class="checkbox flex-middle" :value="item.isChecked"
									:disabled="item.is_enough==0||item.status==0||item.is_del==1"
									@change="selectAction($event,index)" :name="item.id" size="24" shape="circle"
									active-color="#40AE36"></u-checkbox>
								<!-- #endif -->
								<!-- #ifndef MP-WEIXIN-->
								<!-- 其它平台就用v-model -->
								<u-checkbox class="checkbox flex-middle" v-model="item.isChecked"
									:disabled="item.is_enough==0||item.status==0||item.is_del==1"
									@change="selectAction($event,index)" :name="item.id" size="24" shape="circle"
									active-color="#40AE36"></u-checkbox>
								<!-- #endif -->
								<view class="flex" style="flex:1" @click="toDetail(item.goods_id,index)">
									<view class="flex flex_col_center imgs">
										<!-- <image class="logo" v-if="showLogo==1" :src="logo" mode="aspectFit"></image> -->
										<image class="img" :src="item.img" mode="aspectFit"></image>
									</view>
									<view class="info">
										<view class="flex-btw">
											<view>
												<text class="bold" style="font-size: 26rpx">{{item.goods_name}}</text>
												<text class="tag" style="font-size: 24rpx">{{item.spu_name}}</text>
											</view>
											<view style="color:red;font-size: 26rpx" @click.stop="del(item.id,item.spu_id,0,index)">
												删除</view>
										</view>
										<view class="flex wrap flex_col_center tags">
											<text v-if="item.datum_activity"
												class="yellow_tag">{{item.datum_activity}}</text>
											<text v-for="(i,index) in item.datum" :key="index"
												class="red_tag">{{i.title}}</text>
										</view>
										<view class="inventory">
												<text v-if="item.minimum>0">起订量：{{item.minimum}}</text>
												<text v-if="item.inventory_hd||item.designated_inventory>0"
												style="margin-left:20rpx;">库存：{{Number(item.inventory_hd || item.inventory_left)}}</text>											
										</view>
										<view class="flex-btw">
											<!-- current_price等于1说明是时价 -->
											<view class="flex-middle">
												<view class="red_font" v-if="item.current_price==1 && canshowprice==1">
													时价
												</view>
												<view v-else>
													<view v-show="canshowprice" class="red_font">
														¥{{item.activity_price||item.market_price}} /{{item.unit}}</view>
													<view v-show="canshowprice" v-if="item.activity_price"
														class="old_price">¥{{item.market_price}} /{{item.unit}}</view>
												</view>
											</view>
											<!-- #ifndef MP-WEIXIN -->
											<my-stepper :val="item.num" :min="item.minimum"
												:limit="item.inventory_hd?1:item.designated_inventory"
												:inventory="item.inventory_hd||item.inventory_left" :index="index"
												@plus="addAction" @minus="subAction"
												@showKey="$refs.keyboard.open(item.is_standard,index,item.minimum,item.inventory_hd ||item.inventory_left,item.designated_inventory)">
											</my-stepper>
											<!-- #endif -->
											<!-- #ifdef MP-WEIXIN -->
											<my-stepper :val="item.num" :min="item.minimum"
												:limit="item.inventory_hd?1:item.designated_inventory"
												:inventory="item.inventory_hd||item.inventory_left" :index="index"
												@plus="addAction" @minus="subAction"
												@showKey="$refs.keyboard.open(item.$orig.is_standard,index,item.$orig.minimum,item.$orig.inventory_hd ||item.$orig.inventory_left,item.designated_inventory)">
											</my-stepper>
											<!-- #endif -->
										</view>
										<view class="flex-btw">
											<view class="note flex flex_col_center"
												@click.stop="showNotePopup(item.note,item.id,index)">
												<text style="font-weight: bold; font-size: 24rpx">备注：</text>
												<view v-if="item.note" class="input" placeholder="请输入你的备注">{{item.note}}
												</view>
												<image v-else class="edit" :src="edit_img" alt=""></image>
											</view>
											<view v-if="item.is_enough==0" class="cantadd">库存不足</view>
											<view v-else-if="item.status==0" class="cantadd">已下架</view>
											<view v-else-if="item.is_del==1" class="cantadd">已删除</view>
										</view>
										<!-- #ifndef MP-WEIXIN -->
										<u-alert-tips v-if="item.is_origin_price" type="warning"
											description="超过限购数量，按原价购买" style="padding:2rpx 8rpx;font-size: 20rpx;"
											:desc-style="{'fontSize':'18rpx'}"></u-alert-tips>
										<!-- #endif -->
										<!-- #ifdef MP-WEIXIN -->
										<u-alert-tips v-if="item.is_origin_price" class="tips" type="warning"
											description="超过限购数量，按原价购买"
											:desc-style="{'fontSize':'20rpx','padding':'4rpx'}"></u-alert-tips>
										<!-- #endif -->
									</view>
								</view>

							</view>
						</template>
					</view>

					<!-- 积分 -->
					<view class="gifts" v-if="flag_jf">
						<view class="tit">积分商品</view>
						<view class="lists">
							<template v-for="(item,index) in dataList"
							>
								<view v-if="item.datum_activity =='积分'" class="list flex-btw" :key="item.id">
									<block v-if="item.datum_activity =='积分'">
										<view style="display: flex;flex:1;">
											<!-- #ifdef MP-WEIXIN-->
											<!-- 微信小程序不认v-model !只可作用value!!!!! -->
											<u-checkbox class="checkbox flex-middle" :value="item.isChecked"
												:disabled="item.is_enough==0||item.status==0||item.is_del==1"
												@change="selectAction($event,index)" :name="item.id" size="24"
												shape="circle" active-color="#40AE36"></u-checkbox>
											<!-- #endif -->
											<!-- #ifndef MP-WEIXIN -->
											<u-checkbox class="checkbox flex-middle" v-model="item.isChecked"
												:disabled="item.is_enough==0||item.status==0||item.is_del==1"
												@change="selectAction($event,index)" :name="item.id" size="24"
												shape="circle" active-color="#40AE36"></u-checkbox>
											<!-- #endif -->
											<view class="left flex-btw">
												<view class="flex-middle">
													<img class="img" :src="item.img" alt="">
													<view class="flex-column" style="align-items: unset;">
														<text class="name">{{item.goods_name}}</text>
														<text class="jifen">{{item.jf_points}}积分</text>
													</view>
												</view>
												<text class="tag">积分</text>
											</view>
										</view>
										<view class="flex-column">
											<!-- #ifndef MP-WEIXIN -->
											<my-stepper :val="item.num" :min="item.minimum"
												:limit="item.inventory_hd?1:item.designated_inventory"
												:inventory="item.inventory_hd||item.inventory_left" :index="index"
												@plus="addAction" @minus="subAction"
												@showKey="$refs.keyboard.open(item.is_standard,index,item.minimum,item.inventory_hd ||item.inventory_left,1)">
											</my-stepper>
											<!-- #endif -->
											<!-- #ifdef MP-WEIXIN -->
											<my-stepper :val="item.num" :min="item.minimum"
												:limit="item.inventory_hd?1:item.designated_inventory"
												:inventory="item.inventory_hd||item.inventory_left" :index="index"
												@plus="addAction" @minus="subAction"
												@showKey="$refs.keyboard.open(item.$orig.is_standard,index,item.$orig.minimum,item.$orig.inventory_hd ||item.$orig.inventory_left,1)">
											</my-stepper>
											<!-- #endif -->
											<text class="store"><text v-if="item.jf_once_gailimit>0"
													style="margin-right:8rpx;">单次限购：{{item.jf_once_gailimit}}</text>库存：{{Number(item.inventory_hd ||item.inventory_left)}}</text>
										</view>

									</block>
								</view>

							</template>
						</view>
					</view>

					<!-- 赠品 -->
					<view class="gifts" v-if="mjmz_content.type==2&&mjmz_content.mz_info.zp_list.length>0">
						<view class="tit">赠品区</view>
						<view class="lists">
							<view class="list flex-btw" v-for="(item,index) in mjmz_content.mz_info.zp_list"
								:key="index">
								<view class="left flex-middle">
									<image class="img" :src="item.img"></image>
									<text class="name">{{item.goods_name}}【{{item.spu_name}}】</text>
									<text class="tag">赠品</text>
								</view>
								<text>×{{item.num}}</text>
							</view>
						</view>
					</view>

				</scroll-view>
				<view class="discounts_info flex-btw" v-if="mjmz_content.type">
					<!-- 满减 -->
					<view v-if="mjmz_content.type==1" style="flex:1">
						<text v-if="mjmz_content.mj_info.full_reduction_money!=0">已减
							{{mjmz_content.mj_info.full_reduction_money}} 元</text><text
							v-if="mjmz_content.mj_info.need_buy!=0">再买 <text
								class="red">{{mjmz_content.mj_info.need_buy}}</text> 元减 <text
								class="red">{{mjmz_content.mj_info.will_reduction}}</text> 元</text>
					</view>
					<!-- 满赠 -->
					<view v-if="mjmz_content.type==2" style="flex:1">
						<text v-if="mjmz_content.mz_info.got_zp">已送 {{mjmz_content.mz_info.got_zp}} </text><text
							v-if="mjmz_content.mz_info.need_buy!=0"> 再买 <text
								class="red">{{mjmz_content.mz_info.need_buy}}</text> 元送 <text
								class="red">{{mjmz_content.mz_info.will_get}}</text></text>
					</view>
					<view>
						<view v-if="mjmz_content.add_item==1" class="red" @click="toClassify">去凑单<u-icon
								name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
				<view class="accountBar flex-btw">
					<view class="all">
						<u-checkbox class="checkbox" v-model="isSelectAll" @change="selectAll" size="24" shape="circle"
							active-color="#40AE36"> 全选</u-checkbox>
					</view>
					<view class="right">
						<view class="flex-center" style="font-size: 26rpx">合计：
							<view class="flex-column" v-show="canshowprice">
								<text class="price">￥{{allPrice}}</text>
								<text v-if="jf_total>0" class="jf">积分-{{jf_total}}</text>
							</view>

						</view>
						<view class="to flex-center" @click="toOrder"
							:style="JSON.stringify(checkedList.length)>0&&allPrice>0?' ':'background:#CCCCCC'">
							去结算({{checkedList.length}})</view>
					</view>
				</view>

				<my-keyboard ref="keyboard" @confirm="inputPrice"></my-keyboard>
			</view>
		</view>
		<my-addcart ref="cart"></my-addcart>
		<my-tabar ref="tabar" current="2"></my-tabar>
		<u-popup v-model="showNote" mode="bottom" :mask-close-able="false">
			<view class="popup">
				<view class="popup_head flex-btw">
					<view @click="showNote=false">取消</view>
					<view @click="editNote">完成</view>
				</view>
				<textarea @input="noteAction" :value="note" class="textarea" placeholder="请输入你的备注"
					placeholder-style="color:#999"></textarea>
			</view>
		</u-popup>
		<view class="nodata" v-if="dataList.length==0">
			<image :src="nodataImg" mode="aspectFit"></image>
			<view>购物车空空如也~</view>
		</view>
	</view>
</template>

<script>
	import {
		$https
	} from '@/static/js/request.js';
	import MixinShowprice from '@/static/js/mixinshowprice.js'
	export default {
		data() {
			return {
				edit_img: '../../static/image/edit.png',
				nodataImg: getApp().globalData.nodataImgCart,
				loginVolid: '',
				logo: '',
				showLogo: 0,
				showNote: false,

				dataList: [], //商品列表
				flag_jf: false, //是否有积分商品

				isSelectAll: true, //是否全选
				checkedList: [], //已选择的id
				note: '',
				noteId: '',
				totalNum: 0, //购物车总数
				mjmz_content: {}, //type:0:啥都没有, 1:满减 2:满赠
				jf_total: 0,
			}
		},
		mixins: [MixinShowprice],
		onReady() {
			getApp().setTitle()
		},
		onLoad() {
			this.loginVolid = !Boolean(uni.getStorageSync('loginVolid').is_login_cart);
		},
		onShow() {
			this.getData();
			// this.logo = uni.getStorageSync('logo');
			// this.showLogo = uni.getStorageSync('showLogo');
		},
		computed: {
			//计算总金额
			allPrice: function() {
				var price = 0,
					jf = 0;
				this.checkedList.map(item => {
					this.dataList.map(i => {
						if (item == i.id) {
							//计算积分
							if (i.datum_activity == '积分') {
								jf += Number(i.jf_points) * i.num;
							} else if (i.is_origin_price) {
								//超过限购用原价
								price += Number(i.market_price) * i.num
							} else {
								//特价优先
								price += Number(i.activity_price || i.market_price) * i.num
							}
						}
					})
				})
				this.jf_total = jf;
				return price.toFixed(2);
			}
		},
		methods: {
			getData() {
				var checkedId = [];
				$https('GETN', 'getCart', {}, res => {
					var data = res.data.data.list;
					this.$refs.tabar.changetag(res.data.data.all_cart_num);
					this.totalNum = res.data.data.all_cart_num;
					this.mjmz_content = res.data.data.mjmz_content;
					this.flag_jf = res.data.data.flag_jf;
					//如果有数据，用原本的。否则获取新的商品
					if (this.dataList.length > 0) {
						// var oldData = JSON.parse(JSON.stringify(this.dataList))
						// var oldcheckedId = JSON.parse(JSON.stringify(this.checkedList))
						var oldData = this.dataList;
						var oldcheckedId = this.checkedList;
						var newData = [];
						for (let i in data) {
							for (let y in oldData) {
								if (data[i].id == oldData[y].id) {
									//如果旧数据没改变，且新数据商品没有下架或删除 && data[i].goods_status!=0 && data[i].goods_is_del!=1
									if (oldcheckedId.includes(data[i].id)) {
										// if(data[i].goods_status!=0 && data[i].goods_is_del!=1){
										if (data[i].is_enough != 0 && data[i].status != 0 && data[i].is_del != 1) {
											checkedId.push(data[i].id)
											data[i].isChecked = oldData[y].isChecked;
										} else {
											data[i].isChecked = false;
										}
									}
									newData.push(data[i]);
									break;
								}
								//是新数据
								else if (y == oldData.length - 1) {
									data[i].isChecked = true;
									checkedId.push(data[i].id)
									newData.push(data[i]);
								}
							}
						}
						this.checkedList = checkedId;
						this.dataList = newData;
					} else {
						for (let z in data) {
							// if(data[z].goods_status!=0 && data[z].goods_is_del!=1){
							if (data[z].is_enough != 0 && data[z].status != 0 && data[z].is_del != 1) {
								data[z].isChecked = true;
								checkedId.push(data[z].id)
							} else {
								data[z].isChecked = false;
							}
						}
						this.checkedList = checkedId;
						this.dataList = data;
					}
					this.isSelectAll = this.dataList.every(item=>item.isChecked)
				}, this.loginVolid)
			},
			selectAll() {
				this.isSelectAll = !this.isSelectAll;
				var newCheck = [];
				for (let i in this.dataList) {
					//被下架删除的不可选中
					// if(this.dataList[i].goods_status !=0 && this.dataList[i].goods_is_del !=1){
					if (this.dataList[i].is_enough != 0 && this.dataList[i].status != 0 && this.dataList[i].is_del != 1) {
						this.dataList[i].isChecked = this.isSelectAll;
						newCheck.push(this.dataList[i].id)
					}
				}
				if (this.isSelectAll == false) {
					this.checkedList = []
				} else {
					this.checkedList = newCheck;
				}
			},
			selectAction(data, index) {
				// #ifdef MP-WEIXIN
				// 小程序v-model没用，无法双向绑定了。。只能自己赋值
				this.dataList[index].isChecked = !this.dataList[index].isChecked;
				// #endif
				if (!data.value) {
					for (let i in this.checkedList) {
						if (this.checkedList[i] == data.name) {
							this.checkedList.splice(i, 1)
						}
					}
				} else {
					this.checkedList.push(data.name);
				}
				this.$nextTick(()=>{
					// 由于u-checkbox组件的v-model是异步的，通过$nextTick来获取isChecked最新的值
					this.isSelectAll = this.dataList.every(item=>item.isChecked);
				})
			},
			//添加修改备注
			editNote() {
				let value = this.note;
				// if(value){
				$https('POSTN', 'editCartNote', {
					cart_id: this.noteId,
					note: value
				}, res => {
					if (res.data.errcode != 0) {
						uni.showToast({
							title: '修改备注失败，请重试',
							icon: 'none'
						})
					} else {
						this.showNote = false;
						uni.showToast({
							title: '修改备注成功',
							icon: 'none'
						})
						this.dataList[this.noteIndex].note = this.note;
					}
				})

				// }
			},
			showNotePopup(note, id, index) {
				this.note = '处理textarea默认样式不生效';
				let timeId = setTimeout(() => {
					this.note = note;
					clearTimeout(timeId);
				}, 50);
				this.showNote = true;
				this.noteId = id;
				this.noteIndex = index;
			},
			noteAction(data) {
				this.note = data.detail.value;
			},
			//＋
			addAction(data) {
				var index = data.index,
					min = Number(data.min),
					limit = Number(data.limit),
					inventory = Number(data.inventory),
					val = Number(data.value);
				if (val < min) {
					val = min;
				} else if (limit > 0 && val + 1 >= inventory) {
					//不能超过库存量
					val = inventory;
					uni.showToast({
						icon: 'none',
						title: '库存不足'
					})
				} else {
					val++;
				}
				this.addToCart(this.dataList[index].id, this.dataList[index].spu_id, val.toFixed(2), index)
			},
			//-
			async subAction(data) {
				var index = data.index,
					min = Number(data.min),
					inventory = Number(data.inventory),
					val = Number(data.value),
					enough = false;
				if (val - 1 < min) {
					await this.showModalAsync();
					val=0;
				}else if(val == 1){
					await this.showModalAsync();
					val--;
				} else {
					val--;
				}
				if (val <= data.inventory) {
					enough = true;
				}
				this.addToCart(this.dataList[index].id, this.dataList[index].spu_id, val.toFixed(2), index, enough)
			},
			// 添加删除提示
			showModalAsync(){
				return new Promise((resolve, reject) => {
					uni.showModal({
						content: '是否删除商品',
						confirmColor: '#40AE36',
						success: (res) => {
						if (res.confirm) {
							resolve(true);
						} else {
							reject(false);
						}
						},
						fail: () => {
							reject(false);
						}
					});
				});
			},
			//输入数量
			inputPrice(data) {
				var value = Number(data.value),
					index = data.index,
					enough = false;
				//在购物车里超过库存后，数量减到库存之下，库存不足标识应去掉
				if (value <= data.inventory) {
					enough = true;
				}
				this.addToCart(this.dataList[index].id, this.dataList[index].spu_id, value.toFixed(2), index, enough)
			},
			//加入购物车
			addToCart(goodsId, spuId, num, index, enough) {
				var options = {
					goods_id: goodsId,
					spu_id: spuId,
					num,
				}
				$https('POSTN', 'changeCart', options, res => {
					if (res.data.errcode == 0) {
						this.$refs.tabar.changetag(res.data.data.all_cart_num);
						//成功后修改数量
						this.dataList[index].num = Number(num);
						//修改库存不足状态
						if (enough) {
							this.dataList[index].is_enough = 1;
						}
						if (res.data.data.mjmz_content) {
							this.mjmz_content = res.data.data.mjmz_content;
						}
						if (res.data.data.tm_content) {
							this.dataList[index].is_origin_price = 1;
						} else {
							this.dataList[index].is_origin_price = 0;
						}
						//如果等于0就取消勾选
						if (num == 0) {
							this.checkedList.splice(index, 1);
							this.dataList.splice(index, 1)
						}
					} else if (res.data.errcode == 50009) {
						uni.showToast({
							title: res.data.errmsg,
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.data.errmsg,
							icon: 'none'
						})
					}
				})
			},
			//清空购物车
			clearCart() {
				uni.showModal({
					content: '是否清空购物车',
					confirmColor: '#40AE36',
					success: (res) => {
						if (res.confirm) {
							$https('GET', 'delCart', {}, result => {
								if (result.data.errcode == 0) {
									this.checkedList = [];
									this.getData();
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			//删除某一商品
			del(id, spuId, num, index) {
				uni.showModal({
					content: '是否删除该商品',
					confirmColor: '#40AE36',
					success: (res) => {
						if (res.confirm) {
							this.addToCart(id, spuId, num, index)
						}
					}
				})
			},
			//提交订单
			toOrder() {
				if (this.checkedList.length > 0 && this.allPrice > 0) {
					var params = JSON.stringify(this.checkedList)
					uni.navigateTo({
						url: `/subindex/shopcart/submitorder?ids=${params}`
					})
				} else {
					uni.showToast({
						title: '下单金额必须大于0！',
						icon: 'none'
					});
				}
			},
			toDetail(id, index) {
				var data = this.dataList[index];
				if (data.is_del != 1 && data.status != 0) {
					uni.navigateTo({
						url: `/subindex/index/shopdetail?id=${id}`
					})
				}
			},
			toClassify() {
				uni.switchTab({
					url: '/pages/tabar/classify'
				})
			}
		},

	}
</script>

<style lang="scss">
	page {
		overflow: auto;
	}

	/deep/.uicon-checkbox-mark:before {
		transform: scale(.7);
	}

	// #ifdef MP-WEIXIN
	/deep/.tips .u-alert-tips {
		padding: 0 4rpx !important;
		margin-top: 8rpx;
	}

	// #endif
	.shopcart {
		.nodata {
			img {
				width: 312rpx;
			}
		}

		.popup {
			background: #eee;
			height: 500rpx;
			display: flex;
			flex-direction: column;

			.popup_head {
				height: 100rpx;
				padding: 0 40rpx;
				background: #F4F4F4;
				font-size: 32rpx;
				color: #737373;

				>view:last-child {
					color: $dgreen;
				}
			}

			.textarea {
				flex: 1;
				width: 100%;
				padding: 20rpx 40rpx;
				box-sizing: border-box;
				background: #fff;
			}
		}

		.head {
			position: fixed;
			left: 0;
			right: 0;
			//#ifndef MP-WEIXIN
			top: var(--status-bar-height);
			// #endif	
			//#ifdef MP-WEIXIN
			top: 0;
			// #endif
			padding: 10rpx 34rpx;
			height: 80rpx;
			box-sizing: border-box;
			z-index: 2;
			font-size: 20rpx;
			color: #737373;
			background: #F6F6F7;
			box-shadow: 0rpx 10rpx 20rpx #eee;

			.tit {
				font-size: 32rpx;
				color: #191919;
				font-weight: 600;
				padding-left: 20rpx;
			}

			.del {
				font-size: 28rpx;
				color: $dgreen;
			}

			.all {
				margin-top: 10rpx;

				/deep/.u-checkbox__label {
					font-size: 20rpx;
				}
			}
		}

		.content {
			width: 100%;
			margin: 140rpx 0 200rpx;
			//#ifndef MP-WEIXIN
			margin-top: calc(var(--status-bar-height) + 140rpx);
			// #endif
			//#ifdef MP-WEIXIN
			margin-top: 140rpx;

			// #endif
			// padding:0 30rpx;
			.u-checkbox-group {
				width: 100%;
			}

			.all_good {
				width: 100%;

				.sign_good {
					padding: 28rpx 30rpx;
					border-bottom: 1px solid #E7E8E8;

					.imgs {
						position: relative;

						.logo {
							width: 40rpx;
							height: 40rpx;
							position: absolute;
							top: 0;
							left: 0;
							z-index: 1;
						}
					}
				}

				.disable {
					background: #E2E2E3;
				}

				.img {
					width: 116rpx;
					height: 116rpx;
				}
			}

			.info {
				flex: 1;
				margin-left: 40rpx;
				font-size: 24rpx;

				>view+view {
					margin-top: 10rpx;
				}

				.old_price {
					font-size: 20rpx;
					color: #CCCCCC;
					margin-left: 8rpx;
					text-decoration: line-through;
				}

				.note {
					font-size: 24rpx;

					.input {
						flex: 1;
						font-size: 24rpx;
						background: #EDEDED;
						color: #9A9A9A;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						white-space: normal;
				word-break: break-all;
					}

					.edit {
						width: 22rpx;
						height: 22rpx;
					}
				}

				.cantadd {
					background: #BCBCBD;
					color: #fff;
					padding: 8rpx 10rpx;
					border-radius: 4rpx;
					font-size: 20rpx;
					white-space: nowrap;
					margin-left: 10rpx;
				}

				.tag {
					margin-left: 20rpx;
					padding: 0 8rpx;
					background: #e3e3e3;
					border-radius: 8rpx;
					font-size: 16rpx;
				}

				.red_tag {
					font-size: 24rpx;
					padding: 0 12rpx;
					background: red;
				}

				.yellow_tag {
					font-size: 24rpx;
					padding: 0rpx 12rpx;
					margin-right: 6rpx;
					color: #fff;
					background: #F7C23E;
					border-radius: 8rpx;
				}

				.inventory {
					color: #737373;
					font-size: 20rpx;

					>text+text {
						margin-left: 20rpx;
					}
				}
			}

			.total_money {
				width: 564rpx;
				height: 80rpx;
				color: #fff;
				background: $dgreen;
				box-shadow: 0px 2rpx 14rpx 2rpx rgba(0, 0, 0, 0.2);
				border-radius: 48rpx;
				position: fixed;
				bottom: 160rpx;
				left: 0;
				right: 0;
				margin: auto;
				z-index: 9;

				&.gray {
					background: #ccc;
				}
			}

			.discounts_info {
				position: fixed;
				bottom: 216rpx;
				left: 0;
				right: 0;
				background: #FFFBE7;
				padding: 10rpx 32rpx;
				color: #191919;
				font-size: 28rpx;
				box-shadow: 0px -2px 2px 0px rgba(0, 0, 0, 0.06);

				.red {
					color: red;
					margin: 0 8rpx;
				}
			}

			.accountBar {
				position: fixed;
				// bottom: 100rpx;
				bottom: calc(100rpx + env(safe-area-inset-bottom));
				left: 0;
				right: 0;
				height: 116rpx;
				padding-left: 24rpx;
				background: #fff;
				border-bottom: 1px solid #E8E8E8;
				color: #737373;

				.right {
					display: flex;
					align-items: center;

					.price {
						color: red;
						font-size: 26rpx;
					}

					.jf {
						color: red;
						font-size: 24rpx;
					}

					.to {
						margin-left: 30rpx;
						width: 210rpx;
						height: 116rpx;
						background: $dgreen;
						font-size: 26rpx;
						color: #fff;
					}
				}
			}

			.gifts {
				background: #fff;
				margin: 20rpx 34rpx;
				padding: 22rpx 40rpx;
				border-radius: 6rpx;

				.tit {
					text-align: center;
					color: #191919;
					font-size: 28rpx;
					margin-bottom: 14rpx;
					font-weight: bold;
				}

				.img {
					display: inline-block;
					width: 58rpx;
					height: 58rpx;
					margin-right: 26rpx;
					border-radius: 4rpx;
				}

				.name {
					font-size: 24rpx;
					color: #191919;
				}

				.jifen {
					color: #737373;
					font-size: 20rpx;
				}

				.list {
					margin: 20rpx 0;

					.left {
						flex: 1;
					}

					.store {
						color: #737373;
						font-size: 20rpx;
						margin-top: 12rpx;
					}

					.tag {
						font-size: 18rpx;
						padding: 4rpx 10rpx;
						// transform: scale(0.8);
						color: #fff;
						background: #F7C23E;
						border-radius: 8rpx;
						margin-right: 20rpx;
					}
				}
			}
		}
	}

	/deep/.u-checkbox__label {
		font-size: 26rpx;
		color: #666;
	}
</style>
